<template>
<div>
    <div class="content" id="content">
        <ul v-if="kinds">
            <li v-for="(item,index) in List" :key="item.index" class="li">
            

                <div class="title" v-if="item.blog">
                    <router-link :to='"/userdetails/" + item.user.id'>
                    <img :src="item.user.photo" alt="">
                    <a href="###">{{item.user.name}}</a>
                    </router-link>

                    <router-link :to='"/blogdetails/" + item.blog.id'>
                    <a href="###" class="tit">{{item.blog.title}}</a>
                    </router-link>
                </div>
                
                <div class="con" v-if="item.blog">
                    <router-link :to='"/blogdetails/" + item.blog.id'>
                    <span class="text" v-html="item.blog.content">
                    {{item.blog.content}}
                    </span>
                    </router-link>
                    <span class="icon">
                    <i><a href="###" class="iconfont" title="浏览量">&#xe65c;</a>{{item.blog.browse}}</i>
                    <i><a href="###" class="iconfont" title="评论" @click="showcom(index)">&#xe6ab;</a>{{item.blog.comments}}</i>

                    <i v-if="!statue[index]"><a href="###" class="iconfont" title="点赞" @click="good(index)">&#xe6d4;</a>{{item.blog.likes}}</i>
                    
                    <i v-if="statue[index]"><a href="###" class="iconfont" title="取消点赞" @click="good(index)" style="color:skyblue">&#xe6d5;</a>{{item.blog.likes}}</i>

                    <i v-if="!favorite[index]"><a href="###" class="iconfont" title="收藏" @click="collect(index)">&#xe690;</a>{{item.blog.favorite}}</i>
                    <i v-if="favorite[index]"><a href="###" class="iconfont" title="取消收藏" @click="collect(index)" style="color:skyblue">&#xe6ca;</a>{{item.blog.favorite}}</i>
                    </span>
                </div>

                <div class="comment" v-show="shows[index]" v-if="item.blog">
                    <ul>
                    <li v-show="!List[index].blog.comments"><p>暂无评论</p></li>
                    <li v-for="item in listp" :key="item.index">
                        <p>
                        <router-link :to='"/userdetails/" + item.user.id'>
                            <img :src="item.user.photo" alt="">{{item.user.name}}：
                        </router-link>
                            {{item.comment.message}} 
                        <i>{{item.comment.createtime.slice(0,10)}}</i>
                        </p>
                    </li>
                    <li>
                        <input type="text" placeholder="发表评论" v-model="sendmess">
                        <span @click="send(index)"><a href="###">发送</a></span>
                    </li>
                    </ul>
                </div>

            </li>
            
            <li v-show="show1" class="li">找不到相应结果</li>

            <p v-if="loading" class="warn">加载中...</p>
            <p v-if="noMore" class="warn">没有更多了,我也是有底线的！</p>

        </ul>

        <ul v-if="kindv">
            <li v-for="(item,index) in List" :key="item.index" class="li">
                <div class="photo">
                    <img :src="item.resource.photo" alt="" v-if="item.resource">
                </div>
                <div class="message" v-if="item.resource">
                    <p>名字: {{item.resource.name}}</p>
                    <p>路径：{{item.resource.path}}<a href="###"></a></p>
                    <p class="more">简介：{{item.resource.introduction}}</p>
                    <p>上传时间：{{Time[index]}}</p>
                    <router-link :to='"/userdetails/" + item.user.id'>
                    <p>
                        <img :src="item.user.photo" alt="">
                        <a href="">{{item.user.name}}</a>
                    </p>
                    </router-link>
                </div>
                <a href="###" title="收藏" class="iconfont collect" @click="collectv(index)"  v-if="!favoritev[index]">&#xe662;</a>
                <a href="###" title="取消收藏" class="iconfont collect" @click="collectv(index)"  v-if="favoritev[index]" style="color: red">&#xe8c3;</a>
                <span class="icon" v-if="item.resource">
                    <i><a href="###" class="iconfont" title="浏览量">&#xe65c;</a>{{item.resource.browse}}</i>
                    <i><a href="###" class="iconfont" title="评论" @click="showcomv(index)">&#xe6ab;</a>{{item.resource.comments}}</i>
                    <i v-if="!statuev[index]"><a href="###" class="iconfont" title="点赞" @click="goodv(index)">&#xe6d4;</a>{{item.resource.likes}}</i>
                    <i v-if="statuev[index]"><a href="###" class="iconfont" title="取消点赞" @click="goodv(index)" style="color:skyblue">&#xe6d5;</a>{{item.resource.likes}}</i>
                </span>

                <div class="comment" v-show="showv[index]" v-if="item.resource">
                    <ul>
                        <li v-show="!List[index].resource.comments"><p>暂无评论</p></li>
                        <li v-for="item in Listv" :key="item.index">
                        <p>
                            <router-link :to='"/userdetails/" + item.user.id'>
                                <img :src="item.user.photo" alt="">{{item.user.name}}：
                            </router-link>
                            {{item.comment.message}} 
                            <i>{{item.comment.createtime.slice(0,10)}}</i>
                        </p>
                        </li>
                        <li>
                        <input type="text" placeholder="发表评论" v-model="sendmessv">
                        <span @click="sendv(index)"><a href="###">发送</a></span>
                        </li>
                    </ul>
                </div>
            </li>
            <li v-show="show2" class="li">找不到相应结果</li>
        </ul>   

        <ul v-if="kindb">
            <li v-for="(item,index) in List" :key="item.index" class="li">
            <div class="photo">
                <img :src="item.resource.photo" alt="" v-if="item.resource">
                </div>
                <div class="message" v-if="item.resource">
                    <p>书名: {{item.resource.name}}</p>
                    <p>路径：{{item.resource.path}}<a href="###"></a></p>
                    <p class="more">简介：{{item.resource.introduction}}</p>
                    <p>上传时间：{{time[index]}}</p>                  
                    <router-link :to='"/userdetails/" + item.user.id'>
                    <p>
                        <img :src="item.user.photo" alt="">
                        <a href="">{{item.user.name}}</a>
                    </p>
                    </router-link>
                    
                </div>
                <a href="###" class="iconfont collect" title="收藏" @click="collectb(index)" v-if="!favoriteb[index]">&#xe690;</a>
                <a href="###" class="iconfont collect" title="取消收藏" @click="collectb(index)" v-if="favoriteb[index]" style="color: #FFD700">&#xe6ca;</a>
                <span class="icon" v-if="item.resource">
                    <i><a href="###" class="iconfont" title="浏览量">&#xe65c;</a>{{item.resource.browse}}</i>
                    <i><a href="###" class="iconfont" title="评论" @click="showcomb(index)">&#xe6ab;</a>{{item.resource.comments}}</i>
                    <i v-if="!statueb[index]"><a href="###" class="iconfont" title="点赞" @click="goodb(index)">&#xe6d4;</a>{{item.resource.likes}}</i>
                    <i v-if="statueb[index]"><a href="###" class="iconfont" title="取消点赞" @click="goodb(index)" style="color:skyblue">&#xe6d5;</a>{{item.resource.likes}}</i>
                </span>

                <div class="comment" v-show="showb[index]" v-if="item.resource">
                <ul>
                <li v-show="!List[index].resource.comments"><p>暂无评论</p></li>
                <li v-for="item in listb" :key="item.index">
                    <p>
                        <router-link :to='"/userdetails/" + item.user.id'>
                            <img :src="item.user.photo" alt="">{{item.user.name}}：
                        </router-link>
                        {{item.comment.message}} 
                        <i>{{item.comment.createtime.slice(0,10)}}</i>
                    </p>
                </li>
                <li>
                    <input type="text" placeholder="发表评论" v-model="sendmessb">
                    <span @click="sendb(index)"><a href="###">发送</a></span>
                </li>
                </ul>
            </div>
            </li>
            <li v-show="show3" class="li">找不到相应结果</li>
        </ul>
    </div>
</div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
import {EventBus} from '../../../../../static/js/eventBus'
export default {
    name: 'searchContent',

    data () {
        return {
            keyword: '',
            kind: '',
            user: [],

            kinds: false, 
            kindv: false,
            kindb: false,
            List: [],
            Listv: [],
            show1: false, 
            show2: false,
            show3: false, 

            statue: [],
            favorite: [],
            listp: [],
            shows: [],
            sendmess: '',
            loading: true,
            noMore: false,
            
            Time: [],
            statuev: [],
            favoritev: [],
            listv: [],
            showv: [],
            sendmessv: '',

            time: [],
            statueb: [],
            favoriteb: [],
            listb: [],
            showb: [],
            sendmessb: '',
            page: 1,
        }
    },

    created () {
        EventBus.$on('list',(list) => {
            this.List = list;
            // console.log(this.List)

        })

        EventBus.$on('keyword',(keyword) => {
            this.keyword = keyword
            console.log(this.keyword)

        })

        axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
            if (response.data !== "") {
                this.user = response.data
                console.log(this.user)
            }
            } 

        })

        EventBus.$on('kind',(kind) => {
            this.kind = kind;
            // console.log(this.kind)

            if (this.kind === 0) {
                this.kinds = true

                this.kindv = false
                this.kindb = false

                this.show2 = false
                this.show3 = false

                for (var i = 0; i < this.List.length; i++) {
                        let id = this.List[i].blog.id

                        axios.post(`/api/blog/${id}`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                            if (response.status === 200) {
                            this.statue.push(response.data.statue)
                            this.favorite.push(response.data.favorite)
                            this.shows.push(false)
                            } 

                        })

                }
            }else if (this.kind === 1) {
                this.kindv = true

                this.kinds = false
                this.kindb = false

            //     console.log(this.List)
                if(this.List.length == 0) {
                    this.show2 = true
                }
                else {
                    this.show2 = false
                }

                    this.kindv = true

                    this.show1 = false
                    this.show3 = false
                    // console.log(this.kindv)

                    for (var i = 0; i < this.List.length; i++) {
                        if (this.List.resource !== "") {
                            let id = this.List[i].resource.id
                            console.log(id)
                            axios.post(`/api/resource/${id}`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                            if (response.status === 200) {
                                this.Time.push(response.data.resource.createtime.slice(0,10))
                                this.favoritev.push(response.data.favorite)
                                this.statuev.push(response.data.statue)
                                this.showv.push(false)
                            } 
                            })
                        }   
                                                    
                    }
                    
                    
            } else if (this.kind === 2) {
                this.kindb = true

                this.kindv = false
                this.kinds = false

                this.kinds = false
                this.show1 = false
                this.show2 = false

                // EventBus.$on('list',(list) => {
                //     this.List = list;
                //     console.log(this.List)
                    if(this.List.length == 0) {
                        this.show3 = true
                    }
                    else {
                        this.show3 = false
                    }
            
                    for (var i = 0; i < this.List.length; i++) {
                        if (this.List.resource !== "") {
                            let id = this.List[i].resource.id
                            axios.post(`/api/resource/${id}`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                            if (response.status === 200) {
                                this.time.push(response.data.resource.createtime.slice(0,10))
                                this.favoriteb.push(response.data.favorite)
                                this.statueb.push(response.data.statue)
                                this.showb.push(false)
                            } 
                            })

                        }
                        
                    }


            }
        })
        
    },

    mounted () {

    //     // 获取可视区域的高度
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
    //     // 窗口内容实际高度
        var height = document.getElementById("content").clientHeight
    //     // var heightb = document.getElementById("book").clientHeight

    //     // var pag = this.Page
        var _this = this
    //     // console.log(scrollTop)
        document.addEventListener('scroll', function () {
    //         // console.log(scrollTop)
            // console.log(window.pageYOffset,clientHeight,height,)
            if (window.pageYOffset >= clientHeight + height - 530) {
    //             // console.log(window.pageYOffset,clientHeight,height,_this.loading)
                _this.page ++

                // console.log(_this.kind,_this.keyword,_this.page)

                let postData = qs.stringify({
                    option: _this.kind,
                    info: _this.keyword,
                    page: _this.page,
                })
                // console.log(postData)

                axios.post('/api/select', postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {
                    var list = []
                    list = response.data
                    // console.log(list)
                    for (var i = 0; i < list.length; i++) {
                        _this.List.push(list[i])
                        // console.log(_this.List.length)
                    }
                    if (list.length < 15) {
                        _this.noMore = true
                        _this.loading = false
                    }
                })

            }
        })

    },

    methods: {
        good (index) {
            if (this.user != "") {
                if(this.statue[index] == 1) {
                    this.statue[index] = !this.statue[index]
                    let newItem = this.statue[index]
                    Vue.set(this.statue, index, newItem)

                    let postData = qs.stringify({
                    bid: this.List[index].blog.id,
                    statue: 1
                    })

                    axios.post(`/api/likeB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        console.log(this.List)
                        this.List[index].blog.likes --
                        } 

                    })
                } else {
                    this.statue[index] = !this.statue[index]
                    let newItem = this.statue[index]
                    Vue.set(this.statue, index, newItem)

                    let postData = qs.stringify({
                    bid: this.List[index].blog.id,
                    statue: 0
                    })

                    axios.post(`/api/likeB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        console.log(this.List)
                        this.List[index].blog.likes ++
                        } 

                    })

                }
            }
            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }
        },

        collect (index) {
            if (this.user != "") {
                if(this.favorite[index] == 1) {
                this.favorite[index] = !this.favorite[index]
                let newItem = this.favorite[index]
                Vue.set(this.favorite, index, newItem)

                let postData = qs.stringify({
                bid: this.List[index].blog.id,
                favorite: 1
                })

                axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                    console.log(response.data)
                    this.List[index].blog.favorite --
                } 

                })
            } else {
                this.favorite[index] = !this.favorite[index]
                let newItem = this.favorite[index]
                Vue.set(this.favorite, index, newItem)

                let postData = qs.stringify({
                bid: this.List[index].blog.id,
                favorite: 0
                })

                axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                    console.log(response.data)
                    this.List[index].blog.favorite ++
                } 

                })

            }
            }
            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }
        },

        showcom (index) {
        if (this.shows[index] == false) {
            this.shows[index] = !this.shows[index]
            let newItem = this.shows[index]
            Vue.set(this.shows, index, newItem)

        } else {
            this.shows[index] = !this.shows[index]
            let newItem = this.shows[index]
            Vue.set(this.shows, index, newItem)

        }

        let postData = qs.stringify({
            page: 1,
        })

            let id = this.List[index].blog.id

        axios.post(`/api/blog/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
            this.listp = response.data
            console.log(this.listp)
            } 
        })
        },

        send (index) {
            if (this.user != "") {
                let postData = qs.stringify({
                    message: this.sendmess,
                })

                let id = this.List[index].blog.id

                axios.post(`/api/blog/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                    if (response.status === 200) {

                    console.log(response.data)
                    let postData = qs.stringify({
                        page: 1,
                    })

                        let id = this.List[index].blog.id

                    axios.post(`/api/blog/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        this.listp = response.data
                        this.sendmess = ""
                        this.List[index].blog.comments ++
                        console.log(this.listp)

                        let postData = qs.stringify({
                            page: 1,
                        })

                            let id = this.List[index].blog.id

                        axios.post(`/api/blog/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                            if (response.status === 200) {
                            this.listp = response.data
                            console.log(this.listp)
                            } 
                        })

                        } 

                        this.$message({
                            type: 'success',
                            message: "发表成功！"
                        })

                    })
                    } 

                })
            }
            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }
            this.sendmess = ""
        },

        collectv(index) {
            if (this.user != "") {
                if (this.favoritev[index] == 0) {
                    this.favoritev[index] = !this.favoritev[index]
                    let newItem = this.favoritev[index]
                    Vue.set(this.favoritev, index, newItem)
                    
                    let postData = qs.stringify({
                        rid: this.List[index].resource.id,
                        favorite: 0,
                    })

                    axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        this.List[index].resource.favorite ++
                        }

                    })
                }else {
                    this.favoritev[index] = !this.favoritev[index]
                    let newItem = this.favoritev[index]
                    Vue.set(this.favoritev, index, newItem)
                    
                    let postData = qs.stringify({
                        rid: this.List[index].resource.id,
                        favorite: 1,
                    })

                    axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        this.List[index].resource.favorite --
                        }

                    })

                }
            }

            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }
            
        },

        goodv (index) {
            if (this.user != "") {
                if (this.statuev[index] == 0) {
                    this.statuev[index] = !this.statuev[index]
                    let newItem = this.statuev[index]
                    Vue.set(this.statuev, index, newItem)
                    
                    let postData = qs.stringify({
                        rid: this.List[index].resource.id,
                        statue: 0,
                    })

                    axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        this.List[index].resource.likes ++
                        }

                    })
                }else {
                    this.statuev[index] = !this.statuev[index]
                    let newItem = this.statuev[index]
                    Vue.set(this.statuev, index, newItem)
                    
                    let postData = qs.stringify({
                        rid: this.List[index].resource.id,
                        statue: 1,
                    })

                    axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        this.List[index].resource.likes --
                        }

                    })

                }
            }
            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }
            // console.log(this.Statue[index])
        },

        showcomv (index) {
            if (this.showv[index] == false) {
            this.showv[index] = !this.showv[index]
            let newItem = this.showv[index]
            Vue.set(this.showv, index, newItem)

            } else {
            this.showv[index] = !this.showv[index]
            let newItem = this.showv[index]
            Vue.set(this.showv, index, newItem)

            }

            let postData = qs.stringify({
            page: 1,
            })

            let id = this.List[index].resource.id

            axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
                this.Listv = response.data
                console.log(this.listv)
            } 
            })
            
        },

        sendv (index) {
            if (this.user != "") {
                let postData = qs.stringify({
                    message: this.sendmessv,
                })

                let id = this.List[index].resource.id

                axios.post(`/api/resource/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                    if (response.status === 200) {
          
                        console.log(response.data)
                        this.List[index].resource.comments ++
                        let postData = qs.stringify({
                            page: 1,
                        })

                      
                        let id = this.List[index].resource.id
                   

                        axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                            this.Listv = response.data
                            console.log(this.listv)
                        } 
                        })
                    } 

                    this.$message({
                        type: 'success',
                        message: "发表成功！"
                    })

                })
            }
            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }
            this.sendmessv = ""
        },

        collectb(index) {
            if (this.user != "") {
                if (this.favoriteb[index] == 0) {
                    this.favoriteb[index] = !this.favoriteb[index]
                    let newItem = this.favoriteb[index]
                    Vue.set(this.favoriteb, index, newItem)
                    
                    let postData = qs.stringify({
                        rid: this.List[index].resource.id,
                        favorite: 0,
                    })

                    axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        this.List[index].resource.favorite ++
                        }

                    })
                }else {
                    this.favoriteb[index] = !this.favoriteb[index]
                    let newItem = this.favoriteb[index]
                    Vue.set(this.favoriteb, index, newItem)
                    
                    let postData = qs.stringify({
                        rid: this.List[index].resource.id,
                        favorite: 1,
                    })

                    axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        this.List[index].resource.favorite --
                        }

                    })

                }
            }
            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }
            
        },

        goodb (index) {
            if (this.user != "") {
                if (this.statueb[index] == 0) {
                    this.statueb[index] = !this.statueb[index]
                    let newItem = this.statueb[index]
                    Vue.set(this.statueb, index, newItem)
                    
                    let postData = qs.stringify({
                        rid: this.List[index].resource.id,
                        statue: 0,
                    })

                    axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        this.List[index].resource.likes ++
                        }

                    })
                }else {
                    this.statueb[index] = !this.statueb[index]
                    let newItem = this.statueb[index]
                    Vue.set(this.statueb, index, newItem)
                    
                    let postData = qs.stringify({
                        rid: this.List[index].resource.id,
                        statue: 1,
                    })

                    axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                        if (response.status === 200) {
                        console.log(response.data)
                        this.List[index].resource.likes --
                        }

                    })

                }
                
            }
            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }
            // console.log(this.Statue[index])
        },

        showcomb (index) {
            if (this.showb[index] == false) {
            this.showb[index] = !this.showb[index]
            let newItem = this.showb[index]
            Vue.set(this.showb, index, newItem)

            } else {
            this.showb[index] = !this.showb[index]
            let newItem = this.showb[index]
            Vue.set(this.showb, index, newItem)

            }

            let postData = qs.stringify({
            page: 1,
            })

            let id = this.List[index].resource.id
            // console.log(id)

            axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {
            // console.log("id")
            if (response.status === 200) {
                this.listb = response.data
                console.log(this.listb)
            } 
            })
            
        },

        sendb (index) {
            if (this.user != "") {
                let postData = qs.stringify({
                message: this.sendmessb,
                })

                let id = this.List[index].resource.id

                axios.post(`/api/resource/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                    if (response.status === 200) {
                        // this.listp = response.data
                        console.log(response.data)
                        let postData = qs.stringify({
                        page: 1,
                        })

                        this.List[index].resource.comments ++

                        let id = this.List[index].resource.id
                        // console.log(id)

                        axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {
                        // console.log("id")
                        if (response.status === 200) {
                            this.listb = response.data
                            console.log(this.listb)
                        } 
                        })
                    } 

                    this.$message({
                        type: 'success',
                        message: "发表成功！"
                    })

                })
            }
            else {
                this.$message({
                type: 'error',
                message: "请先登录！"
                })
            }

            this.sendmessb = ""
        },
    },

}
</script>

<style lang="stylus" scoped>
.content 
    width 80%
    margin-left 13.2%
    min-height 40rem
    margin-bottom 2rem
    padding-bottom 1rem
    margin-top 5rem
    background-color #fff
    border .05rem #ccc solid
    box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
    ul
      height auto
      margin-left 10%
      width 80%
      //background-color red
      .warn
        width 100%
        text-align center
        margin-top 1rem
        // background-color red
      .li
        width 100%
        line-height 2rem
        margin-top .5rem
        text-indent 1rem
        border 1px #ccc solid
        border-radius 10px
        box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
        background-color #fff
        position relative
        // background-color #fff
        .title
          width 100%
          margin-top .5rem
          height 2rem
          margin-left 1rem
          // background-color skyblue
          img 
            height 95%
            width 3%
            margin-left 0%
            border-radius 50%
          .tit
            font-size 1rem
            margin-left .9rem
            font-weight 700
        .con
          height 2rem
          margin-bottom .5rem
          margin-top .5rem
          margin-left 1rem
          position relative
          .text
            width 70%
            display -webkit-box
            word-break break-all
            -webkit-box-orient vertical
            -webkit-line-clamp 1
            overflow hidden
            text-overflow ellipsis
            // background-color red
          .icon
            width 30%
            position absolute 
            top 0
            left 70%
            // background-color skyblue
            i  
              margin-right 1rem
              font-size .8rem
              color #26a2ff
              // background-color red
        .comment
          width 100%
          height auto
          margin-top 1rem
          position relative
          border-top .1rem #ccc solid
          // background-color red
          ul
            height auto
            li
              width 120%
              font-size .8rem
              margin-bottom .5rem
              margin-left -8rem
              // background-color red
              p
                width 100%
                // text-indent 1.5rem
                img
                  height 2rem
                  width 2%
                  margin-left 0%
                  border-radius 50%
                i
                  font-size .7rem
                  color #ccc
              input 
                width 80%
                position absolute
                bottom .2rem
                text-indent 1 rem
                font-size .8rem
                border .05rem #ccc solid
              span
                padding .3rem 1rem
                margin-left 90%                
                border .05rem #ccc solid
                background-color #fff
                a
                  color #26a2ff
              span:hover
                background-color skyblue
                a
                  color #fff
        .photo
          width 6%
          height 4rem
          left 4%
          position absolute
          background-color #fff
          top 1rem
          img 
            width 150%
            margin-left 0%
            box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
        .message
          width 65%
          height auto
          left 18%
          padding-top .8rem
          position relative
          // background-color red
          p
            line-height 1.4rem
            font-size .8rem
            position relative
            margin-bottom .3rem
            // background-color red
            img
              height 2rem
              width 5%
              margin-left 0%
              border-radius 50%
              box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
            a
              position absolute 
              left 2rem
              top .2rem
              font-size .7rem
        .collect
          position absolute
          top 2.5rem
          left 75%
          font-size 1.8rem
          // background-color red
          margin-left 15%
        .icon
          width 30%
          position absolute 
          top 7.5rem
          left 80%
          // background-color skyblue
          i  
            margin-right 1rem
            font-size .8rem
            color #26a2ff
            // background-color red
        .comment
          width 100%
          height auto
          margin-top 1rem
          position relative
          border-top .1rem #ccc solid
          // background-color red
          ul
            height auto
            li
              width 120%
              font-size .8rem
              margin-left -3.5rem
              margin-bottom .5rem
              // background-color red
              p
                width 100%
                img
                  width 3%
                  margin-left 0%
                  border-radius 50%
                i
                  font-size .7rem
                  color #ccc
              input 
                width 80%
                position absolute
                bottom .2rem
                text-indent 1rem
                font-size .8rem
                border .05rem #ccc solid
              span
                padding .3rem 1rem
                margin-left 83%                 
                border .05rem #ccc solid
                background-color #fff
                a
                  color #26a2ff
              span:hover
                background-color skyblue
                a
                  color #fff
</style>